<template>
  <div class="footer">
    <el-row :gutter="20" type="flex" justify="center"  style=" margin-left: 0px;margin-right: 0px;">
      
      <el-col :span="4">
        <!-- 左边 -->
          <ul>
            <li>abc-赛品党在</li>
            <li><a href="#">共同打造的上亿旅行者‘旅行器’</a></li>
            <li><a href="#">6000 多个地点</a></li>
            <li><a href="#">6000 多个地点</a></li>
            <li><a href="#">6000 多个地点</a></li>
            <li><a href="#">6000 多个地点</a></li>
          </ul>
    
      </el-col>
      <el-col :span="4">
        <!-- 中间 -->
          <ul>
            <li>关于我们</li>
            <li><a href="#">共同打造的上亿旅行者‘旅行器’</a></li>
            <li><a href="#">6000 多个地点</a></li>
            <li><a href="#">6000 多个地点</a></li>
            <li><a href="#">6000 多个地点</a></li>
            <li><a href="#">6000 多个地点</a></li>
          </ul>
      </el-col>
      <el-col :span="4">
        <!-- 右边 -->
          <ul>
            <li>旅行服务</li>
            <li><a href="#">共同打造的上亿旅行者‘旅行器’</a></li>
            <li><a href="#">6000 多个地点</a></li>
            <li><a href="#">6000 多个地点</a></li>
            <li><a href="#">6000 多个地点</a></li>
            <li><a href="#">6000 多个地点</a></li>
          </ul>
      </el-col>
      
      <el-col :span="4" style="padding-left:50px">
        <!-- 二维码 -->
        <canvas ref="qrcode" />
        <p class="aboutMe">关于我们</p>
      </el-col>
     
    </el-row>
   <div class="footerSloid"></div>
  </div>
</template>

<script>
import QRCode from "qrcode"
export default {
  mounted(){
    QRCode.toCanvas(this.$refs.qrcode, '胡泳锋(微信):hu4836',{
      width: 100,
      height: 100,
    })
  }
};
</script>

<style lang="less" scoped>
.footer{
  // margin-left: -8px;
  padding-top: 2%;
  width: 100%;
  height: 220px;
  // position: fixed;
  // bottom: 0;
  background-color: #333333;
  ul>li{
    color: #ccc;
    list-style: none;
    &:first-child{
      font-weight: 700;
      margin-bottom: 10px;
    }
    a{
      // display:flex;
      // justify-content: center;
      text-decoration:none;
      color:#ccc;
      font-size:13px
    }
  }
  .footerSloid{
    width: 65%;
    margin-left: 15%;
    margin-top: 10px;
    border-bottom: 1px solid rgb(182, 182, 182);
  }
  .aboutMe{
    color: #ccc;
    margin-left: 20px;
  }
}

</style>